import React, {PureComponent} from "react";
import './index.css';

export default class Parent extends PureComponent {
	state = {carName: "迈巴赫"};

	changeCar = () => {
		this.setState({carName: "迈巴赫"});
	}

	// 返回true false 控制组件是否更新
	// shouldComponentUpdate(nextProps, nextState, nextContext) {
	// 	return this.state.carName !== nextState.carName;
	// }

	render() {
		console.log("Parent---render");
		const {carName} = this.state;
		return (
			<div className="parent">
				<h1>我是Parent组件</h1>
				<span>我的车的名字是: {carName}</span><br/>
				<button onClick={this.changeCar}>点我换车</button>
				<Child carName={carName}/>
				{/*<Child />*/}
			</div>
		)
	}
}

class Child extends PureComponent {

	// shouldComponentUpdate(nextProps, nextState, nextContext) {
	// 	// console.log(this.props, nextProps);
	// 	return this.props.carName !== nextProps.carName;
	// }

	render() {
		console.log("Child---render");
		return (
			<div className="child">
				<h1>我是Child组件</h1>
				<span>我的车的名字是: {this.props.carName}</span>
			</div>
		)
	}
}